import { h, type VNode } from 'snabbdom'
import { type IDomEditor, type SlateElement, DomEditor } from '@wangeditor/editor'
import { type IRenderElemConf } from '@wangeditor/core';
import { Transforms } from 'slate';
/**
 * @param elemNode slate elem
 * @param children children
 * @param editor editor
 * @returns vnode
 */


function renderTitleBlack(
    elemNode: SlateElement,
    children: VNode[] | null,
    editor: IDomEditor
): VNode {

    const imageUrl = (elemNode as any).imageUrl || ''
    const linkUrl = (elemNode as any).linkUrl || ''
    const serviceName = (elemNode as any).serviceName || ''
    const jobNature = (elemNode as any).jobNature || ''
    const salaryRange = (elemNode as any).salaryRange || ''

    const vnode = h(
        'div',
        {
            style: {
                backgroundColor: '#f9fafb',
                padding: '20px',
                margin: '16px 0',
                cursor: 'default',
                userSelect: 'none',
                position: 'relative',
                maxWidth: '100%',
                fontFamily: 'Arial, Helvetica, sans-serif',
                color: '#000000',
                display: 'flex',
                gap: '20px',
                alignItems: 'flex-start'
            },
            // 添加事件处理，使卡片不可编辑并正确处理删除
            on: {
                click: (e: Event) => {
                    e.preventDefault()
                    e.stopPropagation()
                },
                mousedown: (e: Event) => {
                    e.preventDefault()
                    e.stopPropagation()
                },
                keydown: (e: KeyboardEvent) => {
                    // 处理删除键
                    if (e.key === 'Backspace' || e.key === 'Delete') {
                        e.preventDefault()
                        e.stopPropagation()

                        // 获取当前自定义元素在编辑器中的路径
                        const elemPath = DomEditor.findPath(editor, elemNode)

                        // 删除整个自定义元素
                        Transforms.removeNodes(editor, { at: elemPath })

                        // 在删除后插入一个空段落
                        const emptyParagraph = {
                            type: 'paragraph',
                            children: [{ text: '' }]
                        }
                        Transforms.insertNodes(editor, emptyParagraph)
                    }
                },
                // 防止鼠标进入内部
                mouseenter: (e: Event) => {
                    e.preventDefault()
                    e.stopPropagation()
                },
                mouseleave: (e: Event) => {
                    e.preventDefault()
                    e.stopPropagation()
                }
            }
        },
        [
            // 左侧图片区域
            imageUrl ? h('div', {
                style: {
                    flexShrink: '0',
                    width: '120px',
                    height: '120px',
                    borderRadius: '8px',
                    overflow: 'hidden',
                    backgroundColor: '#f0f0f0'
                }
            }, [
                h('img', {
                    style: {
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover'
                    },
                    src: imageUrl,
                    alt: 'Job posting image',
                    onError: (e: Event) => {
                        // 图片加载失败时隐藏图片
                        (e.target as HTMLElement).style.display = 'none'
                    }
                })
            ]) : null,

            // 右侧内容区域
            h('div', {
                style: {
                    flex: '1',
                    minWidth: '0'
                }
            }, [
                // 编号/标题
                h('div', {
                    style: {
                        fontSize: '18px',
                        fontWeight: 'normal',
                        color: '#000000',
                        margin: '0 0 12px 0'
                    }
                }, (elemNode as any).title),

                // 主描述段落
                h('p', {
                    style: {
                        fontSize: '16px',
                        color: '#000000',
                        margin: '0 0 16px 0',
                        lineHeight: '1.5',
                        fontWeight: 'normal'
                    }
                }, (elemNode as any).description),
                // 水平排列的详情
                h('div', {
                    style: {
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                        marginBottom: '16px',
                        fontSize: '12px',
                        flexWrap: 'wrap'
                    }
                }, [
                    h('div', {
                        style: {
                            display: 'flex',
                            alignItems: 'center',
                            gap: '4px'
                        }
                    }, [
                        h('span', { style: { fontSize: '12px' } }, '🕐'),
                        h('span', {}, serviceName)
                    ]),
                    h('span', { style: { color: '#ccc' } }, '|'),
                    h('div', {
                        style: {
                            display: 'flex',
                            alignItems: 'center',
                            gap: '4px'
                        }
                    }, [
                        h('span', { style: { fontSize: '12px' } }, '💻'),
                        h('span', {}, jobNature)
                    ]),
                    h('span', { style: { color: '#ccc' } }, '|'),
                    h('div', {
                        style: {
                            display: 'flex',
                            alignItems: 'center',
                            gap: '4px'
                        }
                    }, [
                        h('span', { style: { fontSize: '12px' } }, '💰'),
                        h('span', {}, salaryRange)
                    ])
                ]),

                // Apply Now 按钮
                h('button', {
                    style: {
                        backgroundColor: '#007bff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        padding: '10px 20px',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        cursor: 'pointer',
                        transition: 'background-color 0.2s'
                    },
                    on: {
                        click: (e: Event) => {
                            e.preventDefault()
                            e.stopPropagation()
                            if (linkUrl) {
                                window.open(linkUrl, '_blank')
                            }
                        },
                        mouseenter: (e: Event) => {
                            (e.target as HTMLElement).style.backgroundColor = '#0056b3'
                        },
                        mouseleave: (e: Event) => {
                            (e.target as HTMLElement).style.backgroundColor = '#007bff'
                        }
                    }
                }, 'Search Information')
            ])
        ])

    return vnode;
}

export const renderElemConf: IRenderElemConf = {
    type: 'title-black',
    renderElem: renderTitleBlack,
}
